<template>
  <div class="bgy-screen-table">
    <div class="relative" v-show="SHOW_LOADING">
      <iframe src="" frameBorder="0" marginHeight="0" marginWidth="0" id="iframeBGI"></iframe>
      <div id="iframeBGC" :style="{height: `${contentHeight-150}px`}">
        <div style="position: absolute;top: 50%;left: 55%;transform: translate(-50%,-50%);text-align: center">
          <img src="/static/images/bgy-loading.gif" alt="" >
          <div style="text-align: center;font-size: 18px;color: #00e5ff;">请勿关闭浏览器...</div>
        </div>
      </div>
    </div>
    <div class="bgy-screen-left" :style="{height: `${contentHeight}px`}">
      <zz-frame width="100%" height="100%">
        <zz-video
          ref="main_video"
          @success="success_info"
          @failed="failed_info"
          @noSupport="noSupport"
          @getCameraType="getCameraType"
          @initsuccess="initsuccess"
          >
        </zz-video>
      </zz-frame>
    </div>
    <div class="bgy-screen-right">
      <zz-frame width="340px" height="48px" class="mb20" :padding="[17, 17, 17, 17]"  style="text-align: center">
        <div class="back" @click="back">
          返回
        </div>
      </zz-frame>
      <zz-frame width="340px" :height="`${controlHeight-10}px`" :padding="[17, 17, 17, 17]">
        <div class="cloudPlatform" style="padding: 15px 10px">
          <p class="tableP"> <span>云控制台</span> <span class="img_line"></span> <span style="padding: 0px">{{cameraTypeName}}</span></p>
          <div class="cloudButton">
            <div class="clear cloudTr">
              <div class="left cloudtd" @click="PTZCtrl(25)">
                <i class="iconfont icon-jiantou7"></i>
              </div>
              <div class="post_center cloudtd " @click="PTZCtrl(21)">
                <i class="iconfont icon-jiantou2"></i>
              </div>
              <div class="right cloudtd" @click="PTZCtrl(26)">
                <i class="iconfont icon-jiantou5"></i>
              </div>
            </div>
            <div class="clear cloudTr">
              <div class="left cloudtd" @click="PTZCtrl(23)">
                <i class="iconfont icon-jiantou4"></i>
              </div>
              <div class="post_center cloudtd" @click="switch_Fluency">
                  <span v-if="Fluency_type">超清</span><span v-if="!Fluency_type">标清</span>
              </div>
              <div class="right cloudtd" @click="PTZCtrl(24)">
                <i class="iconfont icon-jiantou3"></i>
              </div>
            </div>
            <div class="clear cloudTr">
              <div class="left cloudtd" @click="PTZCtrl(27)">
                <i class="iconfont icon-jiantou6"></i>
              </div>
              <div class="post_center cloudtd" @click="PTZCtrl(22)">
                <i class="iconfont icon-jiantou1"></i>
              </div>
              <div class="right cloudtd" @click="PTZCtrl(28)">
                <i class="iconfont icon-jiantou8"></i>
              </div>
            </div>
          </div>
          <div class="progressBarButton clear">
            <div class="progressBarButtonItem left" @click="PTZCtrl(12)"><i class="iconfont icon-zu3"></i><span>缩小</span></div>
            <div class="progressBarButtonItem right" @click="PTZCtrl(11)"><i class="iconfont icon-zu2"></i><span>放大</span> </div>
          </div>
        </div>
        <div class="controllInfo p15">
          <p class="tableP"><span>操作信息</span></p>
          <div class="infoList" :style="{height: `${contentHeight-522}px`}" v-bar>
            <div class="controllList">
              <p v-for="item in operationInf">
                {{item}}
              </p>
            </div>
          </div>
        </div>
      </zz-frame>
    </div>
  </div>
</template>

<script>
  import mixin from './mixin'
  export default {
    name: 'screen-area',
    mixins: [mixin],
    data () {
      return {
        operationInf: [],
        percent: 50,
        timer: null,
        cameraType: '0',
        cameraTypeName: '枪机',
        SHOW_LOADING: true,
        Fluency_type: false
      }
    },
    activated () {
      this.Fluency_type = false
    },
    methods: {
      initsuccess () {
        this.SHOW_LOADING = false
      },
      // 云控制台操作
      PTZCtrl (id) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        if (id === 11 && this.cameraType === 2) {
          this.percent = this.percent + 12.5
          if (this.percent > 100) {
            this.percent = 100
          }
        }
        if (id === 12 && this.cameraType === 2) {
          this.percent = this.percent - 12.5
          if (this.percent < 0) {
            this.percent = 0
          }
        }
        this.$refs.main_video.SPV_PTZCtrl(0, id)
        if (id === 11 || id === 12) {
          this.timer = setTimeout(() => {
            this.$refs.main_video.SPV_PTZCtrl(1, id)
          }, 500)
        } else {
          this.timer = setTimeout(() => {
            this.$refs.main_video.SPV_PTZCtrl(1, id)
          }, 3000)
        }
      },
      show_info () {
        this.$refs.main_video.SetOSD()
      },
      getCameraType () {
        this.cameraType = this.$refs.main_video.cameraType
        switch (this.cameraType) {
          case 0 :
            this.cameraTypeName = '枪机'
            break
          case 1:
            this.cameraTypeName = '半球'
            break
          case 2:
            this.cameraTypeName = '快球'
            break
          case 3:
            this.cameraTypeName = '带云镜枪机'
            break
        }
      },
      // 操作成功信息
      success_info () {
        this.operationInf.push('操作成功')
      },
      failed_info () {
        this.operationInf.push('操作失败,设备异常,请刷新页面进行预览')
      },
      noSupport () {
        this.operationInf.push('该设备不支持云台控制')
      },
      switch_Fluency () {
        this.Fluency_type = !this.Fluency_type
        this.$refs.main_video.switch_Fluency()
      },
      back () {
        this.operationInf = []
        // this.$router.back(-1)
        if (this.$route.query.backBtn) {
          this.$router.push({name: 'screenVideoProject', query: {pjId: this.$route.query.pjId, name: this.$route.query.name, backBtn: true, auto: true}})
        } else {
          this.$router.back(-1)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>

  #iframeBGI {
    position:fixed;
    visibility:inherit;
    top:0px;
    left:0px;
    width:2000px;
    height:2000px;
    z-index: 2;
    background: rgba(0,0,0,.1);
  }

  #iframeBGC {
    position: fixed;top: 58%;left:38%;width:1375px;height:600px;z-index: 3;transform: translate(-50%,-50%);background-color: #091f2d;
  }


  .back {
    color: #00e8ff;
    font-weight: 700;
    width: 100%;
    height: 100%;
    cursor: pointer;
    font-size: 16px;
    &:hover {
      color: #f2f2f2;
    }
  }

  .cloudButton {
    padding: 0 15px;
    margin-bottom: 10px;
    margin-top: 5px;
    i {
      font-size: 30px;
    }
    .cloudTr {
      padding: 10px 0;
      position: relative;
      .cloudtd {
        cursor: pointer;
        width: 70px;
        height: 70px;
        box-sizing: border-box;
        box-shadow: 0 0 20px 5px rgba(71, 159, 205, 0.35) inset;
        background: rgba(26, 103, 151, 0.18);
        color: #00e8ff;
        text-align: center;
        line-height: 70px;
        border-radius: 5px;
        &:hover {
          box-shadow: 0 0 20px 5px rgba(0, 120, 135, 0.35) inset;
          background: rgba(10, 76, 75, 0.18);
          i{
            color: #f2f2f2;
          }
        }
        &.post_center {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          span {
            font-size: 16px;
          }
        }
      }
    }
  }
  .controllInfo {
    border-top: 1px solid #0a4493;
    .infoList {
      margin-top: 10px;
      border:1px solid #28566d ;
      background-color: #062c43;
      color: #f2f2f2;
      .controllList {
        padding: 5px;
        p{
          margin-bottom: 2px;
        }
      }
    }
  }
  .progressBarButton {
    margin-top: 10px;
    padding: 0 15px;
    .progressBarButtonItem {
      width: 105px;
      height: 42px;
      line-height: 42px;
      box-shadow: 0 0 20px 5px rgba(71, 159, 205, 0.35) inset;
      background: rgba(26, 103, 151, 0.18);
      color: #00e8ff;
      text-align: center;
      cursor: pointer;
      border-radius: 5px;
      span {
        padding-left: 5px;
        font-size: 16px;
        vertical-align: top;
      }
      .iconfont {
        font-size: 20px;
      }
      &:hover {
        box-shadow: 0 0 20px 5px rgba(0, 120, 135, 0.35) inset;
        background: rgba(10, 76, 75, 0.18);
        i{
          color: #f2f2f2;
        }
        span {
          color: #f2f2f2;
        }
      }
    }
  }
  .img_line {
    width: 2px;
    height: 15px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0;
    margin-top: -5px;
    background-size: 100% 100%;
    background-image: url(/static/images/line-duan.png);
    vertical-align: bottom;
  }

  .tableP{
    >span {
      color: #00e8ff;
    }
  }

</style>
